<template>
	<view class="addAddress">
		<form @submit="save">
			<view class="baseW">
				<view class="u-f u-f-ac set-li">
					<text>收货地址</text>
					<view class="tui-input" :class="address ? '' : 'text-grey'"  @click="addrmap"><text class="icon iconfont icon-dizhi"></text>{{address || '点击选择您的收货地址'}}</view>
				</view>
				<view class="u-f u-f-ac set-li">
					<text>收货人</text>
					<input type="text" placeholder="请输入收货人名称" maxlength="25" name="receiverName" placeholder-style="color:#ccc">
				</view>
				<view class="u-f u-f-ac set-li">
					<text>手机号码</text>
					<input type="number" placeholder="请输入您的手机号码"  maxlength="11" name="receivePhone" placeholder-style="color:#ccc">
				</view>
			</view>
			<view class="baseW">
				<view class="u-f-jsb u-f-ac set-li address-detail">
					<text>详细地址</text>
					<textarea placeholder="如街道、门牌号、小区、楼栋号、单元、室等" name="streetAddr" placeholder-style="color:#ccc"></textarea>
				</view>
			</view>
			<view class="baseW">
				<view class="u-f-jsb u-f-ac set-li">
					<view>设置为默认地址</view>
					<switch :checked="true" @change="changeDefault" color="#F22222"></switch>
				</view>			
			</view>
			<tui-button :formType="'submit'"  class="btn-fixed" width="650rpx" type="primary" :shadow="true" shape="circle" :size="30">确定</tui-button>
		</form>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				address:''
			};
		},
		methods:{
			save(e){
				console.log(e)
			},
			addrmap(){
				let that = this
				uni.showModal({
					title: '请求授权当前位置',
					content: '需要获取您的地理位置，请确认授权',
					success: (res) => {
						if (res.confirm) {
							// 获取地址接口
							uni.chooseLocation({
								type: 'wgs84',
								geocode: true,
								success: function(res) {
									console.log(res)
									that.address = res.address
								}
							});
				
						} else if (res.cancel) {
							uni.showToast({
								title: '你拒绝了授权，无法获得周边信息',
								icon: 'none',
								duration: 1000
							})
						}
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
.addAddress {
	padding-top: 20rpx;
}
.baseW {
	padding: 0;
}
.address-detail {
	align-items: flex-start;
}
.tui-header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx;
	box-sizing: border-box;
	background-color: #fff;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	overflow: hidden;
	position: relative;
}
.tui-icon-close {
	position: absolute;
	right: 30rpx;
	top: 50%;
	transform: translateY(-50%);
}
.text-grey{
	color:#ccc ;
}
</style>
